<template>
  <div>
    <div class="column-title">
      <div class="left">{{ activeMenuName }}</div>
      <div class="right" @click="refresh"><i class="el-icon-refresh"></i>刷新</div>
    </div>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-four bg1">
            <div class="text">
              <div class="title">机构总数</div>
              <div class="num">3</div>
            </div>
            <div class="icon">
              <img src="@/assets/images/home_icon1.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-four bg2">
            <div class="text">
              <div class="title">服务点数</div>
              <div class="num">3600</div>
            </div>
            <div class="icon">
              <img src="@/assets/images/home_icon2.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-four bg3">
            <div class="text">
              <div class="title">今日订单数</div>
              <div class="num">3</div>
            </div>
            <div class="icon">
              <img src="@/assets/images/home_icon3.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-four bg4">
            <div class="text">
              <div class="title">服务点数剩余比例</div>
              <div class="num">36%</div>
            </div>
            <div class="icon">
              <img src="@/assets/images/home_icon4.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="admin-part2 mt15">
        <el-row :gutter="20">
          <el-col :span="15">
            <div class="admin-part2-grid">
              <div class="module-title">全年订单走势</div>
              <WholeYearChart height="350px" :chart-data="lineChartData" />
            </div>
          </el-col>
          <el-col :span="9">
            <div class="admin-part2-grid">
              <div class="module-title">各类服务订单占比</div>
              <ServiceChart height="350px" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="admin-part2 mt15">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="admin-part2-grid">
              <div class="module-title">全年订单走势</div>
              <div class="order-status-nodes">
                <div v-for="(item, index) in stateArr" :key="index" class="order-status-node" :class="{ 'order-status-node-disabled': item.num === 0 }">
                  <div class="order-status-node-circle" @click="handleClick(index)" :style="{ backgroundColor: getColor(index + 1) }">{{ index + 1 }}</div>
                  <div class="order-status-node-info" @click="handleClick(index)">
                    <div class="order-status-node-info-title">{{ item.state }}</div>
                    <div class="order-status-node-info-num" :style="{ color: getColor(index + 1) }">{{ item.num }}</div>
                  </div>
                  <div class="order-status-node-line" :style="{ width: index === stateArr.length - 1 ? '0' : '110px' }"></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import { listPost, getPost, delPost, addPost, updatePost } from "@/api/system/post";

export default {
  name: "Post",
  dicts: ['sys_normal_disable'],
  components: {
    WholeYearChart: () => import('@/views/components/wholeYearChart.vue'),
    ServiceChart: () => import('@/views/components/serviceChart.vue'),
  },
  data() {
    return {
      lineChartData: {
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        orders: ['60', '80', '90', '30', '200', '30', '70', '89', '40', '30', '60', '100'],
      },
      stateArr: [
        {
          state: "待提交",
          num: 20
        },
        {
          state: "待核验",
          num: 42
        },
        {
          state: "AI查重中",
          num: 16
        },
        {
          state: "人工核验中",
          num: 3
        },
        {
          state: "已结束",
          num: 3
        }
      ]
    };
  },
  computed: {
    activeMenuName() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return meta.title;
    },
  },
  created() {
    // this.getList();
  },
  methods: {
    getColor(index) {
      switch (index) {
        case 1:
          return "#6d6d6d";
        case 2:
          return "#bf0046";
        case 3:
          return "#3f55bd";
        case 4:
          return "#fe943e";
        case 5:
          return "#1ebb45";
        default:
          return "#ccc";
      }
    },
    handleClick(index) {
      const state = index + 1;
      this.$router.push({ name: "orderList", params: { state } });
    },
    refresh() { }
  }
};
</script>
<style scoped lang="scss">
.bg1 {
  background: linear-gradient(to right, #0774ff, #5ac1ff);
}
.bg2 {
  background: linear-gradient(to right, #f46565, #fd9292);
}
.bg3 {
  background: linear-gradient(to right, #2ed376, #32cd67);
}
.bg4 {
  background: linear-gradient(to right, #ff933b, #ffc893);
}
.grid-four {
  border-radius: 4px;
  height: 96px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 18px;
  .num {
    margin-top: 10px;
  }
}
.admin-part2 {
  .admin-part2-grid {
    background: #f7f9ff;
    // height: 200px;
    padding: 15px;
  }
}
</style>
